<template>
  <div class="area-list-view">

    <template v-for="(area,index) in list">

      <div
        v-if="index < 1 || list.length == 2"
        :key="index"
        class="area-item"
      >

        <p class="area-text">{{ area }}</p>

      </div>

      <div
        v-else-if="index === 2"
        :key="index+1"
        class="area-item"
      >

        <el-popover
          placement="bottom"
          :width="200"
          trigger="click"
        >
          <template #reference>
            <p class="area-text special">更多({{ list.length }})</p>
          </template>

          <div>
            <span>{{ areaStr }}</span>
          </div>
        </el-popover>
      </div>

    </template>

  </div>
</template>

<script>
import {getAreaName} from '@/utils/areaFuc'
import {defineComponent, getCurrentInstance, onMounted, ref, watch} from 'vue'

export default defineComponent({
  name: 'AreaListView',
  props: {
    areas: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    var list = ref([])
    var areaStr = ref('')
    const currentInstance = getCurrentInstance()

    const transformArea = (code) => {
      return '胡兰浩特市'
    }

    const dealData = () => {
      let str = ''
      list.value = []
      props.areas.forEach((a) => {
        str = str + '，'
        if (a.regionName) {
          const name = getAreaName(a)
          str = str + name
          list.value.push(name)
        } else {
          // 将地区code转换为地区名称
          const name = transformArea(a.regionCode)
          str = str + name
          list.value.push(name)
        }
      })
      areaStr.value = str.replace('，', '')
    }

    watch(
      () => props.areas,
      (newval, oldval) => {
        if (newval) {
          dealData()
        }
      },
      { immediate: true, deep: true }
    )

    // watch(
    //   props,
    //   (newValue, oldValue) => {
    //     // 直接监听
    //     if (newValue.areas && newValue.areas.length) {
    //       dealData()
    //     }
    //   },
    //   { deep: true, immediate: true }
    // )

    onMounted(() => {})

    return {
      list,
      areaStr,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@CRM/assets/scss/components/areaListView.scss";
</style>
